<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">
                <div class="final-target"></div>
            </div>
        </div>
    </div>
    <div class="outer" style="border:solid 2px red;width: 40px; ">
        <button class="inner">xxx</button>
    </div>
    <style>
        .grandfather {
            width: 300px;
            height: 200px;
            background-color: chocolate;
        }

        .father {
            width: 200px;
            height: 150px;
            background-color: plum;
        }

        .son {
            width: 150px;
            height: 100px;
            background-color: burlywood;
        }

        .final-target {
            width: 100px;
            height: 60px;
            background-color: fuchsia
        }

        /* 捕获阶段  冒泡阶段 */
        /* 由大到小  由小到大 */
        /* true    false默认 */
    </style>
    <script>
        let ss = (e) => {
             console.log("冒泡阶段 grandfather ", e.target,e.currentTarget);
            //  e.currentTarget
         }
        let grandfather = document.querySelector(".grandfather")
        let father = document.querySelector(".father")
        let son = document.querySelector(".son")
        let finalTarget = document.querySelector(".final-target");
        grandfather.addEventListener("click",ss, false)
        grandfather.addEventListener("click", (e) => {
            console.log("捕获阶段 grandfather ", e.target,e.currentTarget);
            // grandfather.xxx
            // // e.currentTarget.xxx
        }, true)
        father.addEventListener("click", (e) => {
            console.log("冒泡阶段 father ", e.target,e.currentTarget)
            // e.stopPropagation();
        }, false)
        father.addEventListener("click", (e) => {
            console.log("捕获阶段 father ", e.target,e.currentTarget);
            // e.stopPropagation();
        }, true)
        son.addEventListener("click", (e) => {
            // e.stopPropagation();
            console.log("冒泡阶段 son ", e.target,e.currentTarget);

        }, false)
        son.addEventListener("click", (e) => {
            console.log("捕获阶段 son ", e.target,e.currentTarget)
        }, true)
        finalTarget.addEventListener("click", (e) => {
            console.log("冒泡阶段 finalTarget ", e.target,e.currentTarget)
        }, false)
        finalTarget.addEventListener("click", (e) => {
            console.log("捕获阶段 finalTarget ", e.target,e.currentTarget)
        }, true)


        function f1() {
            console.log("1")
        }
        function f2() {
            console.log("2")
        }
        document.querySelector(".outer").addEventListener("click", () => {
            console.log(1)
        })
    </script>
</body>

</html>